
import type DashboardComponentType from "@/visual/commons/types/dashboard-component-type";
import type VideoBoxPropOptionType from "@/visual/commons/types/video-box-prop-option-type";
import { defineComponent, onMounted, type PropType, ref, watch } from "vue";
import './VideoPlayer.less';

export default defineComponent({
  name: "VideoPlayer",
  props: {
    compData: {
      type: Object as PropType<DashboardComponentType<VideoBoxPropOptionType>>,
      default: () => {
        return {};
      },
    },
  },
  setup(props) {
    const videoRef = ref();

    const sources = () => {
      const resourceList: any = [];
      if (props.compData && props.compData.componentDimensions
        && props.compData.componentProps?.sourceList) {
        props.compData.componentProps?.sourceList.map(source => {
          source.src && (resourceList.push(<source src={source.src}></source>));
        })
      }

      return resourceList;
    };

    const attr = () => {
      const attrObj: any = {}
      if (props.compData && props.compData.componentDimensions
        && props.compData.componentProps?.controls) {
        attrObj.controls = 'controls';
      }

      if (props.compData && props.compData.componentDimensions
        && props.compData.componentProps?.autoplay) {
        attrObj.autoplay = 'autoplay';
      }

      if (props.compData && props.compData.componentDimensions
        && props.compData.componentProps?.loop) {
        attrObj.loop = 'loop';
      }

      if (props.compData && props.compData.componentDimensions
        && props.compData.componentProps?.muted) {
        attrObj.muted = 'muted';
      }

      if (props.compData && props.compData.componentDimensions
        && props.compData.componentProps?.preload) {
        attrObj.preload = props.compData.componentProps?.preload;
      }

      if (props.compData && props.compData.componentDimensions
        && props.compData.componentProps?.poster) {
        attrObj.poster = props.compData.componentProps?.poster;
      }

      if (props.compData && props.compData.componentDimensions
        && props.compData.componentDimensions?.width
        && props.compData.componentDimensions?.height) {
        attrObj.width = props.compData.componentDimensions?.width - 4;
        attrObj.height = props.compData.componentDimensions?.height - 4;
      }

      return attrObj
    };

    const reload = () => {
      const paused = videoRef.value.paused;
      if (!paused) {
        videoRef.value.load();
        videoRef.value.play();
      }
    }

    const autoPlay = () => {
      if (props.compData && props.compData.componentProps && props.compData.componentProps?.autoplay) {
        videoRef.value.load();
        videoRef.value.play();
      }
    }

    watch(
      () => props.compData.componentProps?.sourceList,
      () => {
        reload();
      },
      { immediate: false, deep: true }
    );

    onMounted(() => {
      autoPlay();
    })

    return () => (
      <>
        <video {...attr()} ref={videoRef}>
          {
            sources()
          }
        </video>
      </>
    );
  },
});